<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="css/font-awesome.css" />
        <link rel="stylesheet" href="css/sofia-animation.css" />
        <link rel="stylesheet" href="css/sofia.css" />
    </head>
    <body>
        <div id="background">
            <div id="header">
                <div id="logo">
                    <img src="img/logo.png" /> 
                    <span>后台管理系统</span>
                </div>
                <div id="user" data-init="user">
                    <div id="user-menu">
                        <div id="user-menu-content">
                            <div id="user-name">管理员</div>
                            <div id="user-btn-group">
                                <div id="user-info-btn"><i class="fa fa-info-circle"></i>密码修改</div><div id="user-logout-btn"><i class="fa fa-sign-out">退出登录</i></div>
                            </div>
                        </div>
                    </div>
                    <div id="user-face">
                        <img src="img/face.jpg" />
                    </div>
                </div>
            </div>
            <div id="main">
                <div id="nav" data-init="nav">
                    <div id="menu-icon">
                        <i class="fa fa-reorder"></i>
                    </div>
                    <div class="menu-button">
                        <i class="fa fa-dashboard"></i>
                        <p>仪表盘</p>
                        <ul class="sub-menu sub-menu-hide">
                            <li>复杂的内容</li>
                            <li>asdfas</li>
                            <li>超长长长长长长长长长长长</li>
                            <li>1阿斯顿发生</li>
                            <li>1阿斯顿发顺丰</li>
                        </ul>
                    </div>
                    <div class="menu-button">
                        <i class="fa fa-laptop"></i>
                        <p>笔记本电脑</p>
                        <ul class="sub-menu sub-menu-hide">
                            <li>复杂的内容</li>
                            <li>asdfas</li>
                            <li>超长长长长长长长长长长长</li>
                            <li>1阿斯顿发生</li>
                            <li>1阿斯顿发顺丰</li>
                        </ul>                        
                    </div>
                    <div class="menu-button">
                        <i class="fa fa-calendar"></i>
                        <p>日历</p>
                        <ul class="sub-menu sub-menu-hide">
                            <li>复杂的内容</li>
                            <li>asdfas</li>
                            <li>超长长长长长长长长长长长</li>
                            <li>1阿斯顿发生</li>
                            <li>1阿斯顿发顺丰</li>
                        </ul>                        
                    </div>
                    <div class="menu-button">
                        <i class="fa fa-image"></i>
                        <p>照片库</p>
                        <ul class="sub-menu sub-menu-hide">
                            <li>复杂的内容</li>
                            <li>asdfas</li>
                            <li>超长长长长长长长长长长长</li>
                            <li>1阿斯顿发生</li>
                            <li>1阿斯顿发顺丰</li>
                        </ul>                        
                    </div>
                    <div class="menu-button menu-button-active">
                        <i class="fa fa-qrcode"></i>
                        <p>二维码</p>                     
                    </div> 
                    <div id="menu-bottom"><i class="fa fa-cog"></i></div>
                </div>
                <div id="content-box">
                    <div id="content-header">
                        <ul id="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">一嘟噜中文</a></li>
                            <li><a href="#">二级嘟噜</a></li>
                            <li>Last</li>
                        </ul>
                    </div>
                    <div id="content">
                        <div class="ad-content" data-init="ad-list">
                            <div class="ad-list">
                                <div class="ad-item" style="background-image: url(img/1.jpg);">
                                    
                                </div>
                                <div class="ad-item" style="background-image: url(img/2.jpg);">
                                </div>
                                <div class="ad-item" style="background-image: url(img/3.jpg);"></div>
                                <div class="ad-item" style="background-image: url(img/1.jpg);"></div>
                                <div class="ad-item" style="background-image: url(img/2.jpg);"></div>
                                <div class="ad-item" style="background-image: url(img/3.jpg);"></div>
                                <div class="ad-item" style="background-image: url(img/1.jpg);"></div>
                                <div class="ad-item" style="background-image: url(img/2.jpg);"></div>
                                <div class="ad-item" style="background-image: url(img/3.jpg);"></div>                            
                            </div>
                            <div class="ad-prop">
                                <div class="ad-prop-row">
                                    <label>标题</label>
                                    <input id="ad-title" type="text" />
                                    <div class="ad-underline"></div>
                                </div>
                                <div class="ad-prop-row">
                                    <label>链接</label>
                                    <input id="ad-addr" type="text" />
                                    <div class="ad-underline"></div>
                                </div>
                            </div>
                            <div class="ad-move-left"><i class="fa fa-chevron-left"></i></div>
                            <div class="ad-move-right"><i class="fa fa-chevron-right"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer"></div>
        </div>
        <script src="js/jquery-2.2.0.min.js"></script>
        <script src="js/sofia.js"></script>
    </body>
</html>